<template>
  <div class="bigbox">
    <ETable :delelteAll="delMedicineLogsAll" :delelte="delMedicineLogs" :columns="columns" :loadData="getMedicineLogs"
      :isPage="true" :pageSize="[10, 20, 30]" ref="table">

      <template #search="{ params, search, reset }">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="老人姓名:">
            <el-input v-model="params.name" placeholder="请输入老人姓名" clearable />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template #buttons="{ delAll }">
        <el-button type="success" @click="add">用药登记</el-button>
        <el-button type="danger" @click="delAll">批量删除 </el-button>
      </template>

      <template #operation="{ row: { id } }">
        <el-link type="primary" underline='false' @click="router.push(`/medicalcare/details/${id}`)">查看详情</el-link>

        <el-link type="primary" underline='false' class="jiahua" @click="router.push('/medicalcare/medicineplan')">用药计划</el-link>
      </template>

    </ETable>

    <el-dialog v-model="open" title="选择老人">
      <el-form>
        <ETable :columns="columns2" :loadData="getelderly" :isPage="false" :pageSize="[10, 20, 30]" ref="table">
          <template #search="{ params, search, reset }">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="老人姓名:">
                <el-input style="width: 120px;" v-model="params.name" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="身份证号:">
                <el-input style="width: 120px;" v-model="params.idCard" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </template>

          <template #operation>

            <el-button type="primary" @click="router.push('/medicalcare/add')">选择</el-button>
          </template>

          <template #photo="{ row }">
            <el-image style="width: 50px; height: 50px" :src="imgUrl + row.photo" :zoom-rate="1.2" :max-scale="7"
              :min-scale="0.2" :preview-src-list="[imgUrl + row.photo]" :initial-index="4" fit="cover"
              preview-teleported />
          </template>
        </ETable>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import { delMedicineLogs, getMedicineLogs,getelderly, delMedicineLogsAll } from '../../apis/medicalcare/MedicineLogs/MedicineLogs';
import ETable, { type ColumnType } from '../../components/ETable.vue';
import { reactive, ref } from 'vue';

import router from '@/router';




const open = ref(false)
const imgUrl = import.meta.env.VITE_IMG_URL;
const add = () => {
  open.value = true
}

 

const columns = reactive<ColumnType[]>([
  {
    prop: 'id',
    label: '序号',
    width: '',
  },
  {
    prop: 'elderlyName',
    label: '老人姓名',
    width: '',
  },
  {
    prop: 'elderlyGender',
    label: '用药品种',
    width: '',
  },
  {
    prop: 'addAccountName',
    label: '登记人',
    width: '',
  },
  {
    prop: 'addTime',
    label: '登记时间',
    width: '',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
])

const columns2 = reactive<ColumnType[]>([
  {
    prop: 'name',
    label: '老人姓名',
    width: '',
  },
  {
    prop: 'photo',
    label: '头像',
    width: '',
    slot: true,
  },
  {
    prop: 'idCard',
    label: '身份证号',
    width: '',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
])

</script>

<style scoped>
.jiahua {
  margin-left: 20px;
}

.search_top2 {
  margin-left: 10px;
  margin-top: 10px;
}

.search_top {
  width: 200px;
  display: inline-block;
}

.search {
  width: 100%;
  height: 100px;
  background-color: #fff;
  overflow: hidden;
}
</style>